<template>
  <a-modal
    :title="title"
    style="top: 100px;"
    :width="600"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @ok="handleOk"
    @cancel="handleCancel"
    :maskClosable="false"
  >
    <a-form :form="form" >
      <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="考评名称" >
        <a-input
          style="width: 360px"
          placeholder="请输入考评名称"
          v-decorator="['kpmc',{rules: [{ required: true, message: '请输入考评名称信息' },{ max:20,message:'长度不能超过20个字'}]}]"
        />
      </a-form-item>
      <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="考评单位" >
        <a-tree-select
          v-decorator="['kpr',{rules: [{ required: true, message: '请选择考评单位信息' }]}]"
          style="width: 360px"
          :tree-data="orgTree"
          tree-checkable
          :show-checked-strategy="SHOW_PARENT"
          search-placeholder="请选择考评单位"
          placeholder="请选择考评单位"
          @change="selectTree"
          :treeCheckStrictly="true"
        />
      </a-form-item>
      <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="考评计划" >
        <a-select placeholder="请输入考评计划" v-decorator="['kpjhbid',{rules: [{ required: true, message: '请选择考评计划信息' }]}]" @change="changePlan" style="width:360px">
          <a-select-option v-for="d in planList" :value="d.id" :key="d.id">
            {{ d.kpjhmc }}
          </a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="检查方式" >
        <a-select placeholder="请选择检查方式" v-decorator="['jcfs']" style="width:360px">
          <a-select-option :value="'1'" >四不两直检查</a-select-option>
          <a-select-option :value="'2'" >定期检查</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="开始日期" >
        <a-date-picker v-decorator="['kssj']" style="width:360px" valueFormat="YYYY-MM-DD" />
      </a-form-item>
      <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="结束日期" >
        <a-date-picker v-decorator="['jssj']" style="width:360px" valueFormat="YYYY-MM-DD" />
      </a-form-item>
      <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="备注" >
        <a-textarea placeholder="请输入备注" :rows="5" v-decorator="['bz',{rules: [{ max:500,message:'长度不能超过500个字'}]}]" style="width:360px"/>
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script>
import { TreeSelect } from 'ant-design-vue'
import { getPlan, addInfo } from '@/api/parBasicData'
const SHOW_PARENT = TreeSelect.SHOW_PARENT
export default {
  name: 'ScoreManageAdd',
  data () {
    return {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      },
      visible: false,
      confirmLoading: false,
      orgTree: [],
      SHOW_PARENT,
      title: '',
      dwlx: '',
      planList: []
    }
  },
  beforeCreate () {
    this.form = this.$form.createForm(this)
  },
  created () {

  },
  methods: {
    add (orgTree) {
      this.orgTree = orgTree
      this.title = '新增'
      this.visible = true
    },
    edit (record, orgTree) {
      this.orgTree = orgTree
      this.title = '修改'
      this.visible = true
      this.$nextTick(() => {
        this.form.setFieldsValue({ ...record })
      })
    },
    close () {
      this.$emit('close')
      this.form.resetFields()
      this.dwlx = ''
      this.handleTree(this.orgTree)
      this.planList = []
      this.orgTree = []
      this.visible = false
    },
    handleOk () {
      this.form.validateFields((err, values) => {
        if (!err) {
          values.dwlx = this.dwlx
          const param = []
          for (let i = 0; i < values.kpr.length; i++) {
            const entity = {}
            Object.assign(entity, values)
            entity.kpr = values.kpr[i].value
            param.push(entity)
          }
          this.confirmLoading = true
          // 在这里调用新增接口
          return addInfo(
            param
          ).then(
            res => {
              if (res.status === 200) {
                this.$notification['success']({
                  message: '保存成功',
                  duration: 2
                })
                this.visable = false
              } else {
                this.$notification['error']({
                  message: res.message,
                  duration: 4
                })
              }
            }
          ).catch(() =>
            this.$notification['error']({
              message: '出现异常，请联系系统管理员',
              duration: 4
            })
          ).finally(() => {
            this.confirmLoading = false
            this.close()
          })
        }
      })
    },
    handleCancel () {
      this.close()
    },
    selectTree (value, label, extra) {
      this.form.setFieldsValue({
        kpjhbid: [],
        jcfs: [],
        kssj: null,
        jssj: null,
        bz: null
      })
      if (value.length === 1) {
        const basicTree = [{ children: this.orgTree }]
        const node = this.getNode(value[0].value, basicTree)
        this.dwlx = node.dwlx
        this.handleTree(this.orgTree)
        this.initPlan(node.dwlx)
      } else if (value.length === 0) {
        this.dwlx = ''
        this.handleTree(this.orgTree)
        this.planList = []
      }
    },
    getNode (key, tree) {
      let cuurrentNode
      for (let i = 0; i < tree.length; i++) {
        const node = tree[i]
        if (node.children) {
          if (node.children.some(item => { if (item.value === key) { cuurrentNode = item; return true } else { return false } })) {
          } else if (this.getNode(key, node.children)) {
            cuurrentNode = this.getNode(key, node.children)
          }
        }
      }
      return cuurrentNode
    },
    handleTree (tree) {
      for (let i = 0; i < tree.length; i++) {
        const node = tree[i]
        node.disabled = this.dwlx === '' ? false : node.dwlx !== this.dwlx
        if (node.children) {
          this.handleTree(node.children)
        }
      }
    },
    initPlan (dwlx) {
      const param = {}
      param.scbj = '0'
      param.dwlx = dwlx
      param.type = '1'
      getPlan(param).then(res => {
        this.planList = res
      })
    },
    changePlan (val) {
      const plan = this.planList.filter(item => item.id === val)[0]
      this.form.setFieldsValue({
        jcfs: plan.jcfs,
        kssj: plan.kssj,
        jssj: plan.jssj,
        bz: plan.bz
      })
    }
  }
}
</script>
